<template>
  <van-pull-refresh v-model="loading" 
    @refresh="onRefresh">
    <wc-waterfall :gap="10" :cols='2'>
      <div 
        v-for="(item, index) in videoStateReflash" 
        :key="index+item.title"
        >
        <div>
          <!-- 使用 ref 获取图片引用，并使用自定义指令 -->
          <img :ref="'imageRef-' + index"
               :data-src="item.image"
               
               class="rounded"
               alt=""
               v-lazy-load="item.image" />
        </div>
        <div class="text-xs">
          <span>{{ item.title }}</span>
          <div class="flex items-center p-2">
            <img 
            :src="item.avatar" 
            class="w-5 h-5 rounded-xl mx-2" />
            <span>{{ item.author }}</span>
          </div>
        </div>
      </div>
    </wc-waterfall>
  </van-pull-refresh>
</template>
<script setup lang="ts">
import { useVideoStore } from '@/stores/VideoStore';
import { ref, toRefs, computed, onMounted, onUnmounted } from 'vue';
import type { VideoType } from '@/types/youdaoDataTypes.ts';
import { selectUniqueRandom } from '@/utils/utils.ts';
import LazyLoadDirective from '@/utils/v-lazy.ts';

const loading = ref(false);

const videoStore = useVideoStore();
const { VideoState } = toRefs(videoStore);
const videoStateReflash = ref<VideoType[]>(VideoState.value);

const onRefresh = () => {
  setTimeout(() => {
    loading.value = false;
    videoStateReflash.value = selectUniqueRandom(VideoState.value, VideoState.value.length);
  }, 1000);
};

</script>
<style lang="css" scoped>
/* 添加加载动画样式 */
.is-loading {
  background-image: url('/path/to/loading-spinner.gif'); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
</style>